<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/redis_style.css">
    <link rel="stylesheet" type="text/css" href="css/redis_list.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/Globals.js"></script>
    <script type="text/javascript" src="js/jqPaginator.js"></script>

</head>
<body>
<div class="title_box">
    <div class="title_txt">记录</div>
    <div class="title_english">Record</div>
</div>
<div class="box">

    <div class="query_box">
        <div class="query_txt">名称</div>
        <input type="text" id="name"/>
        <select name="authorization" id="authorization">
            <option value="0">全部</option>
        </select>
        <div class="query_but">查询</div>
    </div>
    <div class="explain_box">
        <div class="explain_link">ID</div>
        <div class="explain_link">content</div>
        <div class="explain_link">null</div>
        <div class="explain_link">null</div>
        <div class="explain_link">null</div>
        <div class="explain_link product_operation">操作</div>
    </div>
    <div class="product_content">
    </div>
    <ul class="pagination" id="pagination"></ul>
    <div class="oper_box">共<span class="product_length_number"></span>条记录</div>
</div>
</body>
</html>
<script>
    var page = 1;
    var rows = 10;

    $(document).ready(function () {
        initJqPaginator();
        load_redis_list();
        $(".query_but").click(function () {  //查询按钮
            page = 1;
            load_redis_list();
        });
    });


    function initJqPaginator() {
        $.jqPaginator('#pagination', {
            totalPages: 100,
            visiblePages: 10,
            currentPage: 1,
            first: '<li class="prev"><a href="javascript:;">首页</a></li>',
            last: '<li class="prev"><a href="javascript:;">末页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (num, type) {
                page = num;
                if (type == "change") {
                    load_redis_list();
                }
            }
        });
    }


    function create_club_list(redisContens) {
        var phone = 0;
        var html = '<div class="product_box">'
            + '<div class="br">'
            + '<div class="product_link">'
            /*  + '<div class="product_phc">'
              + '<img class="phc" src="" >'
              + '</div>'*/
            + '<span class="product_name">' + redisContens.id + '</span></div>'
            + '<div class="product_link toto">' + redisContens.content + '</div>'
            + '<div class="product_link toto">'
            + '<span>' + "" + '</span>'
            + '</div>'
            + '<div class="product_link toto">'
            + '<span>' + phone + '</span></div>'
            + '<div class="product_link toto">'
            + '<span>' + 0 + '</span></div>'
            + '<div class="product_link toto product_operation">'
            + '<span onclick="edit_club(' + 0 + ')">编辑</span>'
            + '<span onclick="edit_del(' + 0 + ')">删除</span></div></div>'
            + '</div>';
        return html;
    }

    function load_redis_list() {
        var name = $("#name").val();
        $.ajax({
            type: 'POST',
            url: 'redis/redis_list.do',
            async: false,
            data: {
                name: name,
                page: page,
                pageSize: rows
            },
            dataType: 'json',
            success: function (data) {
                if (data.result == 1) {
                    $(".product_length_number").html(data.data.count);
                    var html = "";
                    var count = data.data.count;


                    for (var i = 0; i < data.data.redisContents.length; i++) {
                        var redisContent = data.data.redisContents[i];
                        html += create_club_list(redisContent.rediscontent);
                    }
                    $(".product_content").html(html);
                    //分页的插件
                    $("#pagination").jqPaginator('option', {
                        totalPages: (Math.ceil(count / rows) < 1 ? 1 : Math.ceil(count / rows)),
                        currentPage: page
                    });
                } else {
                    alert(data.msg);
                }
            }
        });
        $(".product_box:even").css("background", "e6e6e6");
    }

</script>